const computedBehavior = require('miniprogram-computed').behavior

module.exports = Behavior({
	behaviors: [computedBehavior],

	data: {
		id: null,           // 资源ID，可选值
		loading: false,     // 加载状态标志位
		noData: false,      // 无数据标志位，后端返回结果为 0 时，置为 true，上拉加载不再执行
		noMoreData: false,  // 无更多数据标志位，当返回数据条数小于 per_page 条数时置为 true，拉加载不再执行
		form: {},           // 查询条件
		list: [],           // 结果列表
		total: 0,           // 结果总数
		page: 1,            // 当前页码
		per_page: 20,       // 每页条数
    isError: false,     // 接口异常标志位
	},

	attached() {
		this.loadMore()
	},

	computed: {
		isShowSkeleton(data) {
			return data.loading && data.page === 1;
		}
	},

	methods: {
		// 重置列表需求的 data 数据，并发起列表数据请求 
		resetData() {
			if (this.data.loading) return;  // 如果接口已经在请求中，则不重置数据，防止用户持续下拉刷新

			this.setData({
				loading: false,
				page: 1,          // 当前页码置为 1
				list: [],         // 结果列表清空
				total: 0,         // 结果总数置为 0
				noData: false,    // 无数据状态置为 false
				noMoreData: false,// 无更多数据置为 false
				isError: false,   // 接口异常置为 false
			})

			this.loadMore();    // 调用页面中的接口请求方法，后面会介绍 
		},

		/**
		 * @desc 加载分页数据方法
		 * @param {function} fn 接口请求方法 
		 * @param  {any} args   接口请求参数
		 * @return 
		 */
		async getData(fn, ...args) {
			if (this.data._isError) return;   // 接口异常后不再执行请求

			// 无更多数据状态判断
			if (this.data.noMoreData && this.data.page === 1 && this.data.list.length === 0) {
				this.setData({
					noMoreData: false
				})
			}

			// 加载中或者无更多数据时，不再发起接口请求
			if (this.data.loading || this.data.noMoreData) return;

			// 加载状态，用于页面中控制加载动画的显示
			this.setData({ loading: true })

			// 接口查询参数
			const params = {
				page: this.data.page,
				per_page: this.data.per_page,
				...this.data.form
			};

			// 接口请求
			const { code, data, total } = await fn(...args, params);

			// 如果是用户下拉刷新，则关闭下拉动画（非用户下拉调用此方法无变化）
			wx.stopPullDownRefresh();

			// 请求成功，业务状态码统一为 200
			if (code === 200) {
				let noData = false; // 默认数据状态为有数据

				// 当前页为第1页且返回数据为空时，则说明无数据
				// 不使用 total 字段值判断，是因为有的接口不返回此字段
				if (this.data.page === 1 && data.length === 0) {
					noData = true;
				} else {
					noData = false;
				}

				this.data.isError = false; // 此处未使用 setData 方法，因为此字段不需要在页面模板中使用

				// 当前返回数据条数少于请求的每页条数，则说明无更多数据
				if (data.length < this.data.per_page) {
					this.setData({
						noMoreData: true
					})
				}

				// 将返回数据添加到 list 中
				this.data.list.push(...data)

				// 统一设置数据与状态值等
				this.setData({
					noData,
					list: this.data.list,
					page: ++this.data.page,
					total: total || 0,
				})

			} else {
				// 返回异常
				this.data.isError = true;
			}

			// 页面渲染完成后关闭加载动画字段
			wx.nextTick(() => {
				this.setData({
					loading: false
				})
			});
		}
	}
})